<template>
    <div>
        <div class="detailNavContainer">
            <div class="detailNavInner">
                <div @click="goback" class="nav">返回</div>
                <a class="nav" href="#header">
                    <div>商品</div>
                </a>
                <a class="nav" href="#content">
                    <div>详情</div>
                </a>
                <a class="nav" href="#footer">
                    <div>参数</div>
                </a>
            </div>
        </div>
        <div class="goodDetailContainer">
            <div id="header" class="header">
                <div class="herderIner">
                    <div class="sildes">
                        <el-carousel trigger="click" height="468px" arrow="always">
                            <el-carousel-item v-for="item in goodDetailImgs" :key="item.id">
                                <h3>
                                    <img style="width:467px;height:459px;" :src="item.images" />>
                                </h3>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="gooddetailsInfos">
                        <div>
                            <strong>商品:</strong>
                            <span>{{goodInfos_details.goodDetailNmae}}</span>
                        </div>
                        <div>
                            <strong>售价:</strong>
                            <span
                                style="color:red;font-style:underline"
                            >{{goodInfos_details.goodPrice}}￥</span>
                        </div>
                        <div>
                            <strong>是否新品:</strong>
                            <span>{{goodInfos_details.good_is_new?'热卖新品！':'人气旧款！'}}</span>
                        </div>
                        <div>
                            <strong>点击量:</strong>
                            <span>{{goodInfos_details.goodClickNums}}</span>
                        </div>
                        <div>
                            <strong>收藏量:</strong>
                            <span>{{goodInfos_details.goodFavNums}}</span>
                        </div>
                        <div>
                            <strong>月销量:</strong>
                            <span>{{goodInfos_details.goodSoldNums}}件</span>
                        </div>
                        <div>
                            <strong>剩余库存:</strong>
                            <span>{{goodInfos_details.goodNums}}件</span>
                        </div>
                        <div>
                            <strong>免运费:</strong>
                            <span>{{goodInfos_details.goodShipFree?'免运费！':'自承运费'}}</span>
                        </div>
                        <div>
                            <strong>满减:</strong>
                            <span>{{goodInfos_details.good_is_oncounting?'满200元减10元':'非活动商品'}}</span>
                        </div>
                        <hr />
                        <div class="headerOperaContainer">
                            <el-input-number
                                v-model="num"
                                size="small"
                                controls-position="right"
                                @change="handleChange"
                                :min="1"
                                :max="goodInfos_details.goodNums"
                            ></el-input-number>
                            <el-button
                                size="small"
                                @click="addToFav"
                                type="primary"
                                :disabled="isFaved?true:false"
                                v-text="isFaved?'已收藏':'收藏'"
                            ></el-button>
                            <el-button
                                :disabled="isAdded?true:false"
                                v-text="isAdded?'已加入购物车':'加入购物车'"
                                size="small"
                                type="primary"
                                @click="addToShopcar"
                            >加入购物车</el-button>
                            <el-button
                                :disabled="goodInfos_details.goodNums<1?true:false"
                                @click="orderNow"
                                size="small"
                                type="success"
                            >加入我的订单</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="content" class="content">
                <el-image
                    v-for="(item,index) in contentImages"
                    :key="index"
                    :src="item.images"
                    :fit="'contain'"
                ></el-image>
            </div>
            <div id="footer" class="footer">
                <div v-for="(item, index) in goodDetailInfos" :key="index" class="footerInner">
                    <div class="goodinfosfooterleft">{{item.detailName}}</div>
                    <div class="goodinfosfooterright">{{item.detialValue}}</div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            goodId2: this.$route.params.id, // 使用query传参的接受参数方法,
            goodDetailImgs: [],
            goodInfos_details: {},
            num: 1,
            isFaved: false,
            isAdded: false,
            contentImages: [],
            goodDetailInfos: []
        };
    },
    methods: {
        getGoodDetailImg() {
            this.$ajax
                .get("goodsdetialimages/?goods=" + this.goodId2)
                .then(res => {
                    //console.log(res.data);
                    this.goodDetailImgs = res.data.results;
                })
                .catch(err => {
                    console.log("getGoodDetailImg err");
                });
        },
        goodInfos() {
            this.$ajax
                .get("goods/" + this.goodId2)
                .then(res => {
                    this.goodInfos_details = res.data;
                })
                .catch(err => {
                    console.log("getGoodInfos err");
                });
        },
        handleChange(value) {
            //console.log(value);
        },
        // 添加收藏---在后台进一步判断重复收藏返回400,并且按钮禁用
        addToFav() {
            let mytoken = window.localStorage.getItem("token", "");
            if (mytoken !== "") {
                this.$ajax
                    .post("fav/", { goods: this.goodInfos_details.id })
                    .then(res => {
                        //console.log(res.data);
                        if (res.status == 201) {
                            this.$notify({
                                message: "收藏成功！",
                                type: "success"
                            });
                            this.isFaved = true;
                        }
                    })
                    .catch(err => {
                        if (err.detail == 400) {
                            this.$notify({
                                message: "商品已收藏！",
                                type: "warning"
                            });
                            this.isFaved = true;
                        } else {
                            this.$router.push("loginregister");
                            this.$notify({
                                message: "用户未登录或者登录过期，请重新登录！",
                                type: "warning"
                            });
                        }
                    });
            } else {
                this.$router.push("loginregister");
            }
        },
        // 获取当前用户收藏夹是否已有当前商品的收藏--根据用户是否登录来获取
        isFavedOrNot() {
            let mytoken = window.localStorage.getItem("token");
            if (mytoken !== null) {
                // 用户已登录则获取收藏列表来进行对比。如果验证信息已过期则删除token跳转login
                this.$ajax
                    .get("fav/?limit=150")
                    .then(res => {
                        //console.log(res.data.results);
                        res.data.results.forEach(item => {
                            //console.log(item.goods.id);
                            if (item.goods.id == this.goodId2) {
                                this.isFaved = true;
                            }
                        });
                    })
                    .catch(err => {
                        if (err.detail == 401) {
                            // this.$notify({
                            //     message: "登录信息过去请重新登录！",
                            //     type: "warning"
                            // });
                            //this.$router.push("loginregister");
                        }
                    });
            } else {
                // 用户未登录则不对收藏按钮做限制
                this.isFaved = false;
            }
        },
        // 获取当前good的contentimages
        getGoodContentImages() {
            this.$ajax
                .get("goodscontentimages/?goods=" + this.goodId2 + "&limit=30")
                .then(res => {
                    //console.log(res.data);
                    this.contentImages = res.data.results;
                });
        },
        // 获取当前good的参数
        getGoodDetailInfos() {
            this.$ajax
                .get("goodsdetialinfos/?goods=" + this.goodId2 + "&limit=50")
                .then(res => {
                    //console.log(res.data);
                    this.goodDetailInfos = res.data.results;
                });
        },
        // 添加购物车
        addToShopcar() {
            let mytoken = window.localStorage.getItem("token", "");
            if (mytoken !== "") {
                this.$ajax
                    .post("shopcar/", {
                        shopcargoods: this.goodInfos_details.id
                    })
                    .then(res => {
                        //console.log(res.data);
                        if (res.status == 201) {
                            this.$notify({
                                message: "加入购物车成功！",
                                type: "success"
                            });
                            this.isAdded = true;
                            let shopcarObj = res.data;
                            shopcarObj.shopcargoods = this.goodInfos_details;
                            this.$store.commit("addToShopCar", shopcarObj);
                        }
                    })
                    .catch(err => {
                        if (err.detail == 400) {
                            this.$notify({
                                message: "改商品已经在购物车里了哦！",
                                type: "warning"
                            });
                        } else {
                            this.$router.push("loginregister");
                            this.$notify({
                                message:
                                    "用户未登录或登录信息已过期,请重新登录！",
                                type: "warning"
                            });
                        }
                    });
            } else {
                this.$router.push("loginregister");
                this.$notify({
                    message: "用户未登录或登录信息已过期,请重新登录！",
                    type: "warning"
                });
            }
        },
        // 检测该商品是否已经存在于购物车里
        inShopCar() {
            let mytoken = window.localStorage.getItem("token");
            if (mytoken !== null) {
                this.$ajax
                    .get("shopcar/")
                    .then(res => {
                        res.data.results.forEach(item => {
                            // console.log(item.shopcargoods.id);
                            // console.log(this.goodInfos_details.id);
                            if (item.shopcargoods.id == this.goodId2) {
                                this.isAdded = true;
                            } else {
                                this.isAdded = false;
                            }
                        });
                    })
                    .catch(err => {});
            } else {
            }
        },
        // 立即下单--目前是加入我的订单
        orderNow() {
            //this.$router.push({ name: "order", params: { id: this.goodId2 } }); //跳转到下单页
            let mytoken = window.localStorage.getItem("token");
            if (mytoken != null) {
                this.$ajax
                    .post("order/", {
                        goods: this.goodId2,
                        goodsnums: this.num
                    })
                    .then(res => {
                        //console.log(res.data);
                        if (res.status == 201) {
                            this.$notify({
                                message: "商品已加入我的订单，记得及时支付哦！",
                                type: "success"
                            });
                            // 此处需要把订单信息同步到store
                            let order = res.data;
                            order.goods = this.goodInfos_details;
                            this.$store.commit("AddToOrderList", order);
                        }
                    })
                    .catch(err => {
                        //this.$router.push("loginregister");
                        this.$notify({
                            message: "用户未登录或登录信息已过期,请重新登录！",
                            type: "warning"
                        });
                    });
            } else {
                this.$router.push("loginregister");
                this.$notify({
                    message: "用户未登录或登录信息已过期,请重新登录！",
                    type: "warning"
                });
            }
        },
        // 返回产品页面
        goback() {
            this.$router.push("products");
        }
    },
    mounted() {
        //alert("111")
        this.goodInfos();
        //alert("222")
        this.isFavedOrNot();
        //alert("333")
        this.inShopCar();
        //alert("444")
        this.getGoodDetailImg();
        //alert("555")
        this.getGoodContentImages();
        //alert("666")
        this.getGoodDetailInfos();
        //alert("777")
    }
};
</script>


<style lang="scss" scoped>
.goodDetailContainer {
    width: 100%;
    // margin-top: 60px;
    .header {
        width: 65%;
        padding-top: 120px;
        margin: 0 auto;
        display: flex;
        .herderIner:nth-child(1) {
            display: flex;
            margin-left: 10%;
            .sildes {
                height: 557px;
                width: 467px;
            }
            .gooddetailsInfos {
                width: 467px;
                padding: 8px;

                div {
                    font-family: Helvetica, "Hiragino Sans GB",
                        "Microsoft Yahei", "微软雅黑", Arial, sans-serif;
                    strong {
                        line-height: 35px;
                        // font-style: italic;
                        font-size: 11px;
                    }
                    span {
                        line-height: 35px;
                        font-style: italic;
                        font-size: 13px;
                    }
                }
            }
        }
    }
    .content {
        width: 100%;
        height: auto;
    }
    .footer {
        margin-bottom: 120px;
        margin-top: 120px;
        padding-bottom: 50px;
        .footerInner {
            width: 60%;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            transition: all linear 0.2s;
            .goodinfosfooterleft {
                width: 30%;
                text-align: center;
                line-height: 35px;
                font-size: 13px;
                opacity: 0.5;
            }
            .goodinfosfooterright {
                width: 70%;
                text-align: center;
                line-height: 35px;
                font-size: 13px;
                opacity: 0.5;
            }
        }
        .footerInner:hover {
            opacity: 1;
            background-color: #ccc;
        }
    }
}
.detailNavContainer {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 999;
    background-color: antiquewhite;
    .detailNavInner {
        width: 40%;
        height: 100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        .nav {
            width: 33.333%;
            min-width: 155px;
            text-align: center;
            padding: 41px;
            transition: all linear 0.2s;
            opacity: 0.5;
            text-decoration: none;
        }
        .nav:hover {
            opacity: 1;
            background-color: white;
        }
    }
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 1;
    line-height: 446px;
    margin: 0 auto;
}
// 测试样式--------------------------------
</style>

